<template>
  <Head />
  <Search />
  <div class="order">
    <!-- 订单头部START -->
    <div class="order-header">
      <div class="order-header-content">
        <p>我的订单</p>
      </div>
    </div>
    <!-- 订单头部END -->

    <!-- 我的订单主要内容START -->
    <div class="order-content">
      <div class="content">
        <ul>
          <!-- 表头 -->
          <li class="content-info">
            <div class="order-id">订单编号:{{ getOrders.order_id }}</div>
            <div class="order-time">订单时间: {{ getOrders.order_time }}</div>
          </li>
          <li class="header_">
            <div class="pro-img"></div>
            <div class="pro-name">商品名称</div>
            <div class="pro-price">单价</div>
            <div class="pro-num">数量</div>
            <div class="pro-total">小计</div>
          </li>
          <!-- 表头END -->

          <!-- 订单列表 -->
          <li class="product-list">
            <div class="pro-img">
              <router-link
                :to="{
                  path: '/Detail',
                  // query: { productID: getOrders.id },
                }"
                ><img
                  :src="
                    'http://101.132.181.9:3000/' + getOrders.product_picture
                  "
              /></router-link>
            </div>
            <div class="pro-name">
              <a>{{ getOrders.product_name }}</a>
            </div>
            <div class="pro-price">{{ getOrders.product_price }}元</div>
            <div class="pro-num">{{ getOrders.product_num }}</div>
            <div class="pro-total pro-total-in">
              <!-- {{ getOrders.product_price * getOrders.product_num }}元 -->
            </div>
          </li>
        </ul>
        <div class="order-bar">
          <div class="order-bar-left">
            <span class="order-total"
              >共
              <span class="order-total-num">xxx</span>
              商品
            </span>
          </div>
          <div class="order-bar-right">
            <span class="total-price-title">合计:</span>
            <span class="total-price">xxx元</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的订单主要内容END -->
  </div>
  <Footer />
</template>

<script lang="ts">
export default {
  name: "order",
};
</script>

<script lang="ts" setup>
import { getOrder } from "../api/orderApi";
import { reactive, ref } from "vue";
import { useAppStore } from "@/store/user";
const userStore = useAppStore();
interface getOrderInfo {
  id: number | null;
  order_id: number | null;
  order_time: number | null;
  product_id: number | null;
  product_name: string;
  product_num: number | null;
  product_picture: string;
  product_price: number | null;
  user_id: number | null;
}
const getOrders = reactive<getOrderInfo>({
  id: null,
  order_id: null,
  order_time: null,
  product_id: null,
  product_name: "",
  product_num: null,
  product_picture: "",
  product_price: null,
  user_id: null,
});
getOrder(userStore.user_id as number).then((res) => {
  getOrders.id = res.orders[0].id;
  getOrders.order_time = res.orders[0].order_time;
  getOrders.product_id = res.orders[0].product_id;
  getOrders.order_id = res.orders[0].order_id;
  getOrders.product_name = res.orders[0].product_name;
  getOrders.product_num = res.orders[0].product_num;
  getOrders.product_picture = res.orders[0].product_picture;
  getOrders.product_price = res.orders[0].product_price;
  getOrders.user_id = res.orders[0].user_id;
  console.log(res.orders[0]);
});
</script>

<style scoped>
/* 我的订单头部 */
.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
.order .order-header {
  height: 64px;
  font-size: 28px;
  border-bottom: 2px solid #ff6700;
  margin-bottom: 20px;
  background-color: #fff;
}
.order-header-content {
  width: 1225px;
  margin: 0 auto;
}
.order-header-content p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
/* 我的订单头部END */
.content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 50px;
}
.content ul {
  color: #424242;
  line-height: 85px;
}
.content-info {
  height: 60px;
  line-height: 60px;
  padding: 0 26px;
  color: #424242;
  border-bottom: 1px solid #ff6700;
}
.order-id {
  float: left;
  color: #ff6700;
}
.order-time {
  float: right;
}
.header_ {
  height: 85px;
  padding-right: 26px;
  color: #424242;
}

/* 订单列表 */
.product-list {
  height: 85px;
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.pro-img {
  float: left;
  height: 85px;
  width: 125px;
  padding-left: 80px;
}
.pro-img img {
  width: 80px;
  height: 80px;
}
.pro-name {
  float: left;
  width: 380px;
}
.pro-name a {
  color: #424242;
}
.pro-name a:hover {
  color: #ff6700;
}
.pro-price {
  float: left;
  width: 160px;
  padding-right: 18px;
  text-align: center;
}
.pro-num {
  float: left;
  width: 190px;
  text-align: center;
}
.pro-total {
  float: left;
  width: 160px;
  text-align: right;
  padding-right: 80px;
}
.pro-total-in {
  color: #ff6700;
}
.order-bar {
  width: 1185px;
  padding: 0 20px;
  border-top: 1px solid #ff6700;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.order-bar-left {
  float: left;
}
.order-total {
  color: #424242;
}
.order-total-num {
  color: #ff6700;
}
.order-bar-right {
  float: right;
}
.order-bar {
  width: 100%;
  overflow: hidden;
}
.order-total-num {
  color: #ff6700;
}
.total-price-title {
  color: #ff6700;
}
.total-price {
  color: #ff6700;
  font-size: 30px;
}
</style>
